<template>
  <div class="upload">
    <!-- 上传中 -->
    <div class="upload-box --uploading" v-if="state.isUploading">
      {{ $t('common.modelCreateView.isUploading') }}
    </div>

    <!-- 已上传 -->
    <div class="upload-box --uploaded" v-else-if="uploadInfo.videoPath" @click="action.upload">
      <video class="video" :src="uploadInfo.videoPath" controls />
      <div class="video-actions">
        <t-button class="sync-button" @click.stop="action.syncToLibrary">
          {{ $t('common.modelCreateView.syncToLibrary') }}
        </t-button>
      </div>
    </div>

    <!-- 未上传 -->
    <div class="upload-box --unupload" v-else>
      <t-image class="image" :src="ImageShotVideo" />
      <p class="tips">{{ $t('common.modelCreateView.tipsText') }}</p>
      <t-button class="button" @click="action.upload">
        {{ $t('common.modelCreateView.uploadVideoText') }}</t-button
      >
      <!--      <p class="batch-tips">{{ $t('common.modelCreateView.batchUploadTips') }}</p>-->
      <!--      <t-button class="button batch-button" @click="action.batchUpload">-->
      <!--        {{ $t('common.modelCreateView.batchUploadText') }}</t-button-->
      <!--      >-->
    </div>

    <!-- 分类选择对话框 -->
    <CategorySelector
      v-model:visible="state.categoryDialogVisible"
      :videoPath="uploadInfo.videoPath"
      @sync-complete="onSyncComplete"
    />
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import ImageShotVideo from '@renderer/assets/images/create-model/image-shot.png'
import { Client } from '@renderer/client'
import { MessagePlugin } from 'tdesign-vue-next'
import CategorySelector from './CategorySelector.vue'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const uploadInfo = defineModel()

const state = reactive({
  isUploading: false,
  categoryDialogVisible: false
})

const emits = defineEmits(['batch-selected'])

const action = {
  async upload() {
    const filePath = await Client.file.selectVideo()
    if (filePath) {
      state.isUploading = true
      const videoInfo = await Client.file.getVideoInfo(filePath)
      state.isUploading = false
      if (action.check(videoInfo)) {
        uploadInfo.value.videoPath = filePath
      }
    }
  },
  async batchUpload() {
    const filePaths = await Client.file.selectMultipleVideos()
    if (filePaths && filePaths.length > 0) {
      // 限制批量上传数量
      if (filePaths.length > 10) {
        MessagePlugin.warning(t('common.message.batchUploadLimit', { limit: 10 }))
        filePaths.length = 10
      }

      // 验证所有视频
      state.isUploading = true
      const validVideos = []

      for (const filePath of filePaths) {
        const videoInfo = await Client.file.getVideoInfo(filePath)
        if (action.check(videoInfo, false)) { // 不显示错误消息，只过滤
          validVideos.push(filePath)
        }
      }

      state.isUploading = false

      if (validVideos.length === 0) {
        MessagePlugin.error(t('common.message.noValidVideos'))
        return
      }

      if (validVideos.length < filePaths.length) {
        MessagePlugin.warning(t('common.message.someInvalidVideos'))
      }

      // 如果只选择了一个视频，使用普通上传逻辑
      if (validVideos.length === 1) {
        uploadInfo.value.videoPath = validVideos[0]
        return
      }

      // 发出批量选择事件
      emits('batch-selected', validVideos)
    }
  },
  check(videoInfo, showMessage = true) {
    if (!videoInfo.isOK) {
      if (showMessage) {
        MessagePlugin.error(videoInfo.msg || t('common.message.videoUploadError'))
      }
      return false
    }
    if (videoInfo.duration < 8) {
      if (showMessage) {
        MessagePlugin.error(t('common.message.videoLength'))
      }
      return false
    }
    return true
  },
  syncToLibrary(event) {
    event.stopPropagation()
    if (!uploadInfo.value.videoPath) {
      MessagePlugin.error(t('common.message.noVideoToSync'))
      return
    }

    // 显示分类选择对话框
    state.categoryDialogVisible = true
  }
}

// 同步完成后的回调
const onSyncComplete = (result) => {
  if (result.success) {
    MessagePlugin.success(t('common.message.syncSuccess'))
    // 可以在这里设置uploadInfo中的额外信息，如已同步标记
    uploadInfo.value.synced = true
    uploadInfo.value.categoryInfo = result.categoryInfo
  }
}
</script>

<style lang="less" scoped>
.upload {
  &-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: #161718;
    border-radius: 8px;

    &.--unupload {
      .image {
        width: 64px;
        height: 64px;
      }

      .tips {
        margin: 4px auto 16px;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        line-height: 22px;
      }

      .batch-tips {
        margin: 16px auto 8px;
        font-weight: 400;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
        line-height: 18px;
      }

      .batch-button {
        background-color: rgba(67, 74, 249, 0.7);
      }

      .button {
        background-color: #434af9;
        color: #ffffff;
        border: none;

        &:hover {
          background-color: #5158fa;
        }
      }
    }

    &.--uploading {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);

      &::before {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-top-color: #434af9;
        border-radius: 50%;
        margin-bottom: 12px;
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
    }

    &.--uploaded {
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      cursor: pointer;

      .video {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }

      .video-actions {
        position: absolute;
        bottom: 10px;
        right: 10px;
        display: flex;
        gap: 8px;
        z-index: 5;

        .sync-button {
          background-color: rgba(0, 0, 0, 0.6);
          color: #ffffff;
          border: 1px solid rgba(255, 255, 255, 0.3);
          font-size: 12px;
          padding: 4px 12px;
          transition: all 0.2s ease;

          &:hover {
            background-color: rgba(67, 74, 249, 0.8);
            border-color: transparent;
          }
        }
      }

      &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
      }

      &:hover::after {
        opacity: 1;
      }
    }
  }
}
</style>
